<template>
    <div class="app-container">

        <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">
            <el-col :span="6">
                <el-form-item label="消息类型:" prop="messageType">
                    <el-select v-model="queryParams.messageType" clearable>
                        <el-option :label="item.dictLabel" :value="item.dictSort"
                            v-for="(item, index) in busFlowTypeList" :key="index"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="消息通知:" prop="title">
                    <el-input v-model="queryParams.title" clearable placeholder="请输入消息通知"></el-input>
                </el-form-item>
            </el-col>
        </SearchContent>

        <div class="card-wrap paddingAll20" :model="queryParams" label-width="86px">
            <div class="table-title-wrap justify-end">
                <el-button type="primary" size="mini" @click="handleOperate(2)"
                           v-hasPermi="['purchaseManage:purchaseList:add']">新增
                </el-button>
            </div>
            <table-page :loading="loading" :dataList="dataList" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @setSizeCurrent="getList" border>
                <!-- 操作插槽 -->
                <template slot="tableColAc">
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="60px">
                        <template v-slot="{ row }">
                            <e-button size="mini" type="text" @click="handleOperate(1, row)"
                                v-hasPermi="['messageManagement:notification:edit']">编辑
                            </e-button>
                            <e-button size="mini" type="text" @click="handleOperate(4, row)"
                                v-hasPermi="['messageManagement:notification:see']">查看
                            </e-button>
                        </template>
                    </el-table-column>
                </template>
                <!-- 普通列插槽 -->
                <template slot="tableCol">
                    <el-table-column label="消息通知" align="center" prop="title" min-width="120px" show-overflow-tooltip />
                    <el-table-column label="消息类型" align="center" prop="messageType" min-width="120px"
                        show-overflow-tooltip>
                        <template v-slot="{ row }">
                            <dict-tag :options="dict.type.message_type" :value="row.messageType" />
                        </template>
                    </el-table-column>
                    <el-table-column label="路由" align="center" prop="path" min-width="120px" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="路由参数" align="center" prop="query" min-width="120px"
                        show-overflow-tooltip />
                    <el-table-column label="完整路由" align="center" prop="url" min-width="120px"
                        show-overflow-tooltip />
                </template>
            </table-page> 

        </div>
        <el-dialog :title="title" :visible.sync="open" append-to-body class="form-dialog" width="45%">
            <el-form ref="form" :rules="rules" :model="form" label-width="140px" @submit.native.prevent>

                <el-row>
                    <el-col :span="20">
                        <el-form-item label="消息code:" prop="messageCode">
                            <el-input maxlength="50" :disabled='status' v-model="form.messageCode" clearable
                                placeholder="请输入消息code"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="20">
                        <el-form-item label="消息通知:" prop="title">
                            <el-input maxlength="50" :disabled='status' v-model="form.title" clearable
                                placeholder="请输入标签名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="20">
                        <el-form-item label="消息类型:" prop="messageType">
                            <el-select style="width: 100%" v-model="form.messageType"  :disabled='status' placeholder="请选择消息类型">
                                <template v-for="dict in dict.type.message_type">
                                    <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                                </template>
                                </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="20">
                        <el-form-item label="路由名称:" prop="path">
                            <el-input v-model="form.path" 
                                placeholder="请输入路由名称" :disabled='status'></el-input>
                        </el-form-item>
                    </el-col>
                    
                    <el-col :span="20">
                        <el-form-item label="配置参数:" prop="messageParamList">
                            <el-input v-model="form.messageParamList" type="textarea"  :rows="2" clearable
                                placeholder="请输入配置参数" :disabled='status' ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="20">
                        <el-form-item label="路由参数:" prop="query">
                            <el-input v-model="form.query" type="textarea" maxlength="500" :rows="2" clearable
                                placeholder="请输入标签描述" :disabled='status' ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="20">
                        <el-form-item label="完整路由:" prop="url">
                            <el-input v-model="form.url" type="textarea" maxlength="500" :rows="2" clearable
                                placeholder="请输入完整路由" :disabled='status' ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button @click="cancel">{{ isNew ? '取消' : '关闭' }}</el-button>
                <el-button :loading="buttonLoading" type="primary" @click="submitForm" v-if="isNew">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import SearchContent from "@/components/SearchContent/index.vue";
import * as apis from "@/api/messageManagement/index.js";
export default {
    name: "MessageParameters",
    components: {
        SearchContent,
    },
    dicts: [ 'message_type'],
    data() {
        return {
            // 遮罩层
            loading: false,
            retutnCarTimes: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                title: null,
            },
            total: 0,
            dataList: [],
            open: false,
            title: "",
            rules: {
                title:[
                    { required: true, message: "请输入消息通知", trigger: "blur" },
                ],
                messageType:[
                    { required: true, message: "请选择消息类型", trigger: "blur" },
                ],
                // query:[
                //     { required: true, message: "请输入路由参数", trigger: "blur" },
                // ],
                // path:[
                //     { required: true, message: "请输入路由名称", trigger: "blur" },
                // ],
                // url:[
                // { required: true, message: "请输入完整路由", trigger: "blur" },
                // ],
                messageCode:[
                    { required: true, message: "请输入消息code", trigger: "blur" },
                ]
            },
            form: {
                url:'',
                path:'',
                query:'',
                messageCode:'',
                title:'',
                messageType:'',
                messageParamList:''

            },
            isNew: true,
            buttonLoading: false,
            status: false,
            busFlowTypeList: [],
            noticeNum:0,
            noticeState:false,
            noticeInfo:[], // 选中通知人员
        };
    },
    mounted() {
        this.getList()
    },
    async created() {
        this.busFlowTypeList = await this._getDicts("message_type");
    },
    activated() {
        this.handleQuery()
    },
      methods: {
        submitForm() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    let obj = JSON.parse(JSON.stringify(this.form))
                    obj.messageParamList = this.form?.messageParamList?JSON.parse(this.form.messageParamList):null
                    // const param = {
                    //     id: this.form?.id?this.form?.id:null,
                    //     url:this.form?.url,
                    //     path:this.form?.path,
                    //     query:this.form?.query,
                    //     title:this.form?.title,
                    //     messageType:this.form?.messageType,
                    //     messageCode:this.form?.messageCode,
                    //     messageParamList:this.form?.messageParamList?JSON.parse(this.form.messageParamList):null
                    // }
                    // 编辑
                    if(this.type==1){
                          apis.messageCountUpdate(obj).then((res) => {
                            if (res.code == 200) {
                                this.open = false
                                this.getList()
                                this.$message.success('编辑成功')
                            }
                        })
                    }else{
                        apis.messageCountAdd(obj).then((res)=>{
                            if (res.code == 200) {
                                this.open = false
                                this.getList()
                                this.$message.success('新增成功')
                            }
                        })
                    }
                  
                  
                } 
                });
           
        },
        cancel() {
            this.open = false
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            apis.messageNoticeList(this.queryParams).then(res => {
                this.dataList = res.rows;
                this.total = res.total;
            }).finally(() => {
                this.loading = false
            })
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                vinNo: null,
            },
                this.getList();
        },


        handleOperate(type, row) {
            this.type = type
            this.form = {
                url:'',
                path:'',
                query:'',
                messageCode:'',
                title:'',
                messageType:'',
                messageParamList:''
            }
            this.open = true

            if (type == 1) {
                this.title = '编辑'
                this.isNew = true
                this.status = false
            } else if(type == 2){
                this.title = '新增'
                this.isNew = true
                this.status = false
            }else {
                this.title = '查看'
                this.isNew = false
                this.status = true
            }
            if(type !== 2){
                apis.messageCountDetail(row.id).then((res) => {
                    if (res.code == 200) {
                        this.form = res.data
                            if(res.data?.messageParamList){
                                const list = []
                                res.data?.messageParamList?.map((res)=>{
                                    let obj = {
                                        paramName:res.paramName,
                                        paramValue:res.paramValue,
                                    }
                                    list.push(obj)
                                })
                                this.$set(this.form,'messageParamList',JSON.stringify(list))
                                this.$set(this.form,'messageType',res.data?.messageType?res.data?.messageType.toString():null)
                            }
                    }
                })
            }
          
        },


    }
};
</script>
<style scope>
.parameter {
    cursor: pointer;
    margin-right: 5px;
}
.notice{
    margin-right: 15px;
    cursor: pointer;
}
.noticeColor{
    color: blue;
}
</style>
